.add-wrap {
    padding-top: 12px;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    .header {
        padding: 0 16px;
        .close {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
    .filter {
        padding: 12px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .type {
            span {
                display: inline-block;
                background-color: #fff;
                color: rbga(0,0,0,0.5);
                padding: 4px 12px;
                font-size: 12px;
                border-radius: 24px;
                border: 1px solid #f5f5f5;
            }
            .expense {
                margin-left: 6px;
                &.active {
                    background-color: #eafbf6;
                    border-color: #007fff;
                    color: #007fff;
                }
            }
            .income {
                &.active {
                    background-color: #f8f8f8;
                    border-color: rgb(236, 190, 37);
                    color:rgb(236, 190, 37);
                }
            }
        }
        .time {
            display: felx;
            justify-content: center;
            align-items: center;
            padding: 4px 12px;
            background-color: #f0f0f0;
            border-radius: 20px;
            color: rbga(0,0,0,0.9);
            .arrow {
                font-size: 12px;
                margin-left: 5px;
            }
        }
    }

    .money {
        padding-bottom: 12px;
        border-bottom: 1px solid #e9e9e9;
        margin: 0 24px;
        .sufix {
            font-size: 36px;
            font-weight: bold;
            vertical-align: top;
        }
        .amount {
            font-size: 40px;
            padding-left: 10px;
        }
    }
    .type-wrap {
        display: flex;
        overflow-x: auto;
        margin: 0 24px;
        margin-bottom: 20px;
        // 横向滚动
        * {
            touch-action: pan-x;
        }
        .type-body {
            display: flex;
            white-space: nowrap;
            .type-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 16px 12px 10px 12px;
                .iconfont-wrap {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    background-color: #f5f5f5;
                    border-radius: 50%;
                    width: 30px;
                    height: 30px;
                    margin-bottom: 5px;
                    .iconfont {
                        color: rgba(0, 0, 0, 0.9);
                        font-size: 20px;
                    }
                }
                .expense {
                    &.active {
                        background-color: #007fff;
                        .iconfont {
                            color: #fff;
                        }
                    }
                }
                .income {
                    &.active {
                        background-color: rgb(236, 190, 37);
                        .iconfont {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    .remark {
        padding: 0 24px;
        padding-bottom: 12px;
        color: #007fff;
        :global {
            .za-input--textarea {
                border: 1px solid #e9e9e9;
                padding: 10px;
            }
        }
    }
}